<!--&lt;!&ndash;<template>&ndash;&gt;-->
<!--&lt;!&ndash;  <div>&ndash;&gt;-->
<!--&lt;!&ndash;    <h2>欢迎来到回复患者消息页面</h2>&ndash;&gt;-->
<!--&lt;!&ndash;    <div v-for="message in messages" :key="message.id" class="message-container">&ndash;&gt;-->
<!--&lt;!&ndash;      <div v-if="message.initiatorId !== id" class="message-received">&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="message-text">{{ message.content }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;      <div v-else class="message-sent">&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="message-text">{{ message.content }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="time">{{ message.createTime }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;    </div>&ndash;&gt;-->
<!--&lt;!&ndash;    <input type="text" v-model="newMessage" placeholder="输入消息" />&ndash;&gt;-->
<!--&lt;!&ndash;    <button @click="sendMessage">发送</button>&ndash;&gt;-->
<!--&lt;!&ndash;  </div>&ndash;&gt;-->
<!--&lt;!&ndash;</template>&ndash;&gt;-->

<!--&lt;!&ndash;<script>&ndash;&gt;-->
<!--&lt;!&ndash;import { launchInterrogation, historyInterrogation } from '@/api/websocket/websocket';&ndash;&gt;-->
<!--&lt;!&ndash;import {getInfo} from "@/api/login";&ndash;&gt;-->

<!--&lt;!&ndash;export default {&ndash;&gt;-->
<!--&lt;!&ndash;  components: {},&ndash;&gt;-->
<!--&lt;!&ndash;  props: {},&ndash;&gt;-->
<!--&lt;!&ndash;  data() {&ndash;&gt;-->
<!--&lt;!&ndash;    return {&ndash;&gt;-->
<!--&lt;!&ndash;      interrogation: {&ndash;&gt;-->
<!--&lt;!&ndash;        id: null,&ndash;&gt;-->
<!--&lt;!&ndash;        consultantId: null, // 问诊人&ndash;&gt;-->
<!--&lt;!&ndash;        initiatorId: null,&ndash;&gt;-->
<!--&lt;!&ndash;        doctorId: null&ndash;&gt;-->
<!--&lt;!&ndash;      },&ndash;&gt;-->
<!--&lt;!&ndash;      messages: [],&ndash;&gt;-->
<!--&lt;!&ndash;      newMessage: '',&ndash;&gt;-->
<!--&lt;!&ndash;      ws: null,&ndash;&gt;-->
<!--&lt;!&ndash;      id: null,&ndash;&gt;-->
<!--&lt;!&ndash;      isConnected: false,&ndash;&gt;-->
<!--&lt;!&ndash;      interrogationId: null,&ndash;&gt;-->
<!--&lt;!&ndash;      doctorId: this.$route.query.doctorId,&ndash;&gt;-->
<!--&lt;!&ndash;      consultantId: this.$route.query.consultantId,&ndash;&gt;-->
<!--&lt;!&ndash;      inquiryId: this.$route.query.inquiryId,&ndash;&gt;-->
<!--&lt;!&ndash;      user: {},&ndash;&gt;-->
<!--&lt;!&ndash;    };&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->
<!--&lt;!&ndash;  computed: {},&ndash;&gt;-->
<!--&lt;!&ndash;  watch: {},&ndash;&gt;-->
<!--&lt;!&ndash;  methods: {&ndash;&gt;-->
<!--&lt;!&ndash;    getUserInfo(){&ndash;&gt;-->
<!--&lt;!&ndash;      getInfo().then(res => {&ndash;&gt;-->
<!--&lt;!&ndash;        console.log(res.data)&ndash;&gt;-->
<!--&lt;!&ndash;        this.user = res.data.user&ndash;&gt;-->
<!--&lt;!&ndash;        // this.id = res.data.user.userId&ndash;&gt;-->
<!--&lt;!&ndash;        console.log("用户编号"+this.id)&ndash;&gt;-->
<!--&lt;!&ndash;      })&ndash;&gt;-->
<!--&lt;!&ndash;    },&ndash;&gt;-->
<!--&lt;!&ndash;    launchInterrogation() {&ndash;&gt;-->
<!--&lt;!&ndash;      this.interrogation.consultantId = this.consultantId&ndash;&gt;-->
<!--&lt;!&ndash;      this.id = this.doctorId&ndash;&gt;-->
<!--&lt;!&ndash;      console.log(this.consultantId)&ndash;&gt;-->
<!--&lt;!&ndash;      console.log("患者诊断记录表编号"+this.inquiryId)&ndash;&gt;-->
<!--&lt;!&ndash;      this.interrogation.doctorId = this.doctorId&ndash;&gt;-->
<!--&lt;!&ndash;      console.log("医生"+this.interrogation.doctorId)&ndash;&gt;-->
<!--&lt;!&ndash;      console.log("问诊人"+this.interrogation.consultantId)&ndash;&gt;-->
<!--&lt;!&ndash;      launchInterrogation(this.interrogation).then(res => {&ndash;&gt;-->
<!--&lt;!&ndash;        this.interrogationId = res.data;&ndash;&gt;-->

<!--&lt;!&ndash;        historyInterrogation(this.interrogationId).then(res => {&ndash;&gt;-->
<!--&lt;!&ndash;          console.log("查询到的历史记录:", res.data.medicalConsultationRecordList);&ndash;&gt;-->
<!--&lt;!&ndash;          if (res.data != null) {&ndash;&gt;-->
<!--&lt;!&ndash;            this.messages = res.data.medicalConsultationRecordList || [];&ndash;&gt;-->
<!--&lt;!&ndash;          }&ndash;&gt;-->
<!--&lt;!&ndash;        });&ndash;&gt;-->
<!--&lt;!&ndash;      });&ndash;&gt;-->
<!--&lt;!&ndash;    },&ndash;&gt;-->
<!--&lt;!&ndash;    connectToWebSocket() {&ndash;&gt;-->
<!--&lt;!&ndash;      const wsUrl = `ws://localhost:10003/imserver/${this.id}`;&ndash;&gt;-->
<!--&lt;!&ndash;      this.ws = new WebSocket(wsUrl);&ndash;&gt;-->

<!--&lt;!&ndash;      this.ws.onopen = () => {&ndash;&gt;-->
<!--&lt;!&ndash;        console.log('WebSocket 连接已打开');&ndash;&gt;-->
<!--&lt;!&ndash;        this.isConnected = true;&ndash;&gt;-->
<!--&lt;!&ndash;        // 在 WebSocket 连接完全建立后再发送初始化消息&ndash;&gt;-->
<!--&lt;!&ndash;        this.sendMessageIfConnected();&ndash;&gt;-->
<!--&lt;!&ndash;      };&ndash;&gt;-->

<!--&lt;!&ndash;      this.ws.onclose = () => {&ndash;&gt;-->
<!--&lt;!&ndash;        console.log('WebSocket 连接已关闭');&ndash;&gt;-->
<!--&lt;!&ndash;        this.isConnected = false;&ndash;&gt;-->
<!--&lt;!&ndash;      };&ndash;&gt;-->

<!--&lt;!&ndash;      this.ws.onerror = (error) => {&ndash;&gt;-->
<!--&lt;!&ndash;        console.error('WebSocket 错误', error);&ndash;&gt;-->
<!--&lt;!&ndash;        this.isConnected = false;&ndash;&gt;-->
<!--&lt;!&ndash;      };&ndash;&gt;-->

<!--&lt;!&ndash;      this.ws.onmessage = (event) => {&ndash;&gt;-->
<!--&lt;!&ndash;        const message = JSON.parse(event.data);&ndash;&gt;-->
<!--&lt;!&ndash;        if (message.content !== undefined) {&ndash;&gt;-->
<!--&lt;!&ndash;          console.log("获取到的回调数据:", message);&ndash;&gt;-->
<!--&lt;!&ndash;          this.messages.push(message);&ndash;&gt;-->
<!--&lt;!&ndash;        } else {&ndash;&gt;-->
<!--&lt;!&ndash;          console.warn('接收到的数据无效或格式错误:', event.data);&ndash;&gt;-->
<!--&lt;!&ndash;        }&ndash;&gt;-->
<!--&lt;!&ndash;      };&ndash;&gt;-->
<!--&lt;!&ndash;    },&ndash;&gt;-->
<!--&lt;!&ndash;    sendMessage() {&ndash;&gt;-->
<!--&lt;!&ndash;      if (this.newMessage.trim() === '') return;&ndash;&gt;-->
<!--&lt;!&ndash;      const now = new Date();&ndash;&gt;-->
<!--&lt;!&ndash;      const formattedTime = now.toISOString().slice(0, 19).replace('T', ' ');&ndash;&gt;-->
<!--&lt;!&ndash;      const message = {&ndash;&gt;-->
<!--&lt;!&ndash;        id: Date.now(),&ndash;&gt;-->
<!--&lt;!&ndash;        inquiryId: this.interrogationId, //患者医生聊天表编号&ndash;&gt;-->
<!--&lt;!&ndash;        sender: this.doctorId,&ndash;&gt;-->
<!--&lt;!&ndash;        content: this.newMessage,&ndash;&gt;-->
<!--&lt;!&ndash;        sendTime: formattedTime,&ndash;&gt;-->
<!--&lt;!&ndash;        to: this.consultantId&ndash;&gt;-->
<!--&lt;!&ndash;      };&ndash;&gt;-->
<!--&lt;!&ndash;      if (this.isConnected) {&ndash;&gt;-->
<!--&lt;!&ndash;        this.messages.push(message);&ndash;&gt;-->
<!--&lt;!&ndash;        this.ws.send(JSON.stringify(message));&ndash;&gt;-->
<!--&lt;!&ndash;        this.newMessage = '';&ndash;&gt;-->
<!--&lt;!&ndash;      } else {&ndash;&gt;-->
<!--&lt;!&ndash;        console.warn('WebSocket 连接尚未建立，消息未发送');&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    },&ndash;&gt;-->
<!--&lt;!&ndash;    sendMessageIfConnected() {&ndash;&gt;-->
<!--&lt;!&ndash;      if (this.isConnected) {&ndash;&gt;-->
<!--&lt;!&ndash;        const initialMessage = {&ndash;&gt;-->
<!--&lt;!&ndash;          id: Date.now(),&ndash;&gt;-->
<!--&lt;!&ndash;          inquiryId: this.interrogationId, //患者医生聊天表编号&ndash;&gt;-->
<!--&lt;!&ndash;          sender: this.doctorId,&ndash;&gt;-->
<!--&lt;!&ndash;          content: '初始化连接',&ndash;&gt;-->
<!--&lt;!&ndash;          createTime: new Date().toISOString().slice(0, 19).replace('T', ' '),&ndash;&gt;-->
<!--&lt;!&ndash;          to: this.consultantId,&ndash;&gt;-->
<!--&lt;!&ndash;        };&ndash;&gt;-->
<!--&lt;!&ndash;        this.ws.send(JSON.stringify(initialMessage));&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->
<!--&lt;!&ndash;  created() {&ndash;&gt;-->
<!--&lt;!&ndash;    this.getUserInfo();&ndash;&gt;-->
<!--&lt;!&ndash;    this.connectToWebSocket();&ndash;&gt;-->
<!--&lt;!&ndash;    this.launchInterrogation();&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->
<!--&lt;!&ndash;  mounted() {},&ndash;&gt;-->
<!--&lt;!&ndash;  beforeCreate() {},&ndash;&gt;-->
<!--&lt;!&ndash;  beforeMount() {},&ndash;&gt;-->
<!--&lt;!&ndash;  beforeUpdate() {},&ndash;&gt;-->
<!--&lt;!&ndash;  updated() {},&ndash;&gt;-->
<!--&lt;!&ndash;  beforeDestroy() {&ndash;&gt;-->
<!--&lt;!&ndash;    if (this.ws && this.ws.readyState === WebSocket.OPEN) {&ndash;&gt;-->
<!--&lt;!&ndash;      this.ws.close();&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->
<!--&lt;!&ndash;  destroyed() {},&ndash;&gt;-->
<!--&lt;!&ndash;  activated() {}&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;</script>&ndash;&gt;-->

<!--&lt;!&ndash;<style scoped>&ndash;&gt;-->
<!--&lt;!&ndash;.message-container {&ndash;&gt;-->
<!--&lt;!&ndash;  display: flex;&ndash;&gt;-->
<!--&lt;!&ndash;  align-items: flex-start;&ndash;&gt;-->
<!--&lt;!&ndash;  margin-bottom: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;.message-received {&ndash;&gt;-->
<!--&lt;!&ndash;  margin-right: auto;&ndash;&gt;-->
<!--&lt;!&ndash;  background-color: #ddd;&ndash;&gt;-->
<!--&lt;!&ndash;  border-radius: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;  padding: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;  max-width: 70%;&ndash;&gt;-->
<!--&lt;!&ndash;  word-wrap: break-word;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;.message-sent {&ndash;&gt;-->
<!--&lt;!&ndash;  margin-left: auto;&ndash;&gt;-->
<!--&lt;!&ndash;  background-color: #00bfff;&ndash;&gt;-->
<!--&lt;!&ndash;  border-radius: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;  padding: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;  max-width: 70%;&ndash;&gt;-->
<!--&lt;!&ndash;  word-wrap: break-word;&ndash;&gt;-->
<!--&lt;!&ndash;  display: flex;&ndash;&gt;-->
<!--&lt;!&ndash;  flex-direction: column;&ndash;&gt;-->
<!--&lt;!&ndash;  align-items: flex-end;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;.message-text {&ndash;&gt;-->
<!--&lt;!&ndash;  display: block;&ndash;&gt;-->
<!--&lt;!&ndash;  color: #333;&ndash;&gt;-->
<!--&lt;!&ndash;  font-size: 1em;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;.time {&ndash;&gt;-->
<!--&lt;!&ndash;  font-size: 0.8em;&ndash;&gt;-->
<!--&lt;!&ndash;  color: #999;&ndash;&gt;-->
<!--&lt;!&ndash;  margin-top: 5px;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;input {&ndash;&gt;-->
<!--&lt;!&ndash;  width: 200px;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;button {&ndash;&gt;-->
<!--&lt;!&ndash;  margin-left: 10px;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;</style>&ndash;&gt;-->



<!--<template>-->
<!--  <div>-->
<!--    <h2>欢迎来到聊天室</h2>-->
<!--    <div v-for="message in messages" :key="message.id" class="message-container">-->
<!--      <div v-if="message.initiatorId !== id" class="message-received">-->
<!--        <span class="message-text">{{ message.content }}</span>-->
<!--      </div>-->
<!--      <div v-else class="message-sent">-->
<!--        <span class="message-text">{{ message.content }}</span>-->
<!--        <span class="time">{{ message.createTime }}</span>-->
<!--      </div>-->
<!--    </div>-->
<!--    <input type="text" v-model="newMessage" placeholder="输入消息" />-->
<!--    <button @click="sendMessage">发送</button>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { launchInterrogation, historyInterrogation } from '@/api/websocket/websocket.js';-->

<!--export default {-->
<!--  components: {},-->
<!--  props: {},-->
<!--  data() {-->
<!--    return {-->
<!--      interrogation: {-->
<!--        id: null,-->
<!--        consultantId: null, // 问诊人-->
<!--        initiatorId: null,-->
<!--        doctorId: null-->
<!--      },-->
<!--      messages: [],-->
<!--      newMessage: '',-->
<!--      ws: null,-->
<!--      id: this.$route.query.doctorId,-->
<!--      isConnected: false,-->
<!--      interrogationId: null,-->
<!--      doctorId: this.$route.query.doctorId,-->
<!--      consultantId: this.$route.query.consultantId,-->
<!--      inquiryId: this.$route.query.inquiryId,-->
<!--      user: {},-->

<!--      // interrogation: {-->
<!--      //   id: null,-->
<!--      //   initiatorId: 101,-->
<!--      //   doctor: 1-->
<!--      // },-->
<!--      // messages: [],-->
<!--      // newMessage: '',-->
<!--      // ws: null,-->
<!--      // id: 1,-->
<!--      // isConnected: false,-->
<!--      // interrogationId: null,-->
<!--    };-->
<!--  },-->
<!--  computed: {},-->
<!--  watch: {},-->
<!--  methods: {-->
<!--    launchInterrogation() {-->
<!--      this.interrogation.consultantId = this.consultantId-->
<!--      console.log(this.consultantId)-->
<!--      console.log("患者诊断记录表编号"+this.inquiryId)-->
<!--      this.interrogation.doctorId = this.doctorId-->
<!--      console.log("医生"+this.interrogation.doctorId)-->
<!--      console.log("问诊人"+this.interrogation.consultantId)-->

<!--      launchInterrogation(this.interrogation).then(res => {-->
<!--        this.interrogationId = res.data;-->
<!--        console.log("患者医生聊天记录表编号"+this.interrogationId)-->
<!--        historyInterrogation(this.interrogationId).then(res => {-->
<!--          console.log("查询到的历史记录:", res.data.interrogationChats);-->
<!--          if (res.data != null) {-->
<!--            this.messages = res.data.interrogationChats || [];-->
<!--          }-->
<!--        });-->
<!--      });-->
<!--    },-->
<!--    connectToWebSocket() {-->
<!--      const wsUrl = `ws://localhost:10003/imserver/${this.id}`;-->
<!--      this.ws = new WebSocket(wsUrl);-->

<!--      this.ws.onopen = () => {-->
<!--        console.log('WebSocket 连接已打开');-->
<!--        this.isConnected = true;-->
<!--        // 在 WebSocket 连接完全建立后再发送初始化消息-->
<!--        this.sendMessageIfConnected();-->
<!--      };-->

<!--      this.ws.onclose = () => {-->
<!--        console.log('WebSocket 连接已关闭');-->
<!--        this.isConnected = false;-->
<!--      };-->

<!--      this.ws.onerror = (error) => {-->
<!--        console.error('WebSocket 错误', error);-->
<!--        this.isConnected = false;-->
<!--      };-->

<!--      this.ws.onmessage = (event) => {-->
<!--        const message = JSON.parse(event.data);-->
<!--        if (message.content !== undefined) {-->
<!--          console.log("获取到的回调数据:", message);-->
<!--          this.messages.push(message);-->
<!--        } else {-->
<!--          console.warn('接收到的数据无效或格式错误:', event.data);-->
<!--        }-->
<!--      };-->
<!--    },-->
<!--    sendMessage() {-->
<!--      if (this.newMessage.trim() === '') return;-->
<!--      const now = new Date();-->
<!--      const formattedTime = now.toISOString().slice(0, 19).replace('T', ' ');-->
<!--      const message = {-->
<!--        id: Date.now(),-->
<!--        inquiryId: this.interrogationId, //患者医生聊天表编号-->
<!--        sender: this.doctorId,-->
<!--        content: this.newMessage,-->
<!--        sendTime: formattedTime,-->
<!--        to: this.consultantId-->

<!--        // interrogationId: this.interrogationId,-->
<!--        // id: Date.now(),-->
<!--        // content: this.newMessage,-->
<!--        // createTime: formattedTime,-->
<!--        // initiatorId: this.id,-->
<!--        // to: '101',-->
<!--      };-->
<!--      if (this.isConnected) {-->
<!--        this.messages.push(message);-->
<!--        this.ws.send(JSON.stringify(message));-->
<!--        this.newMessage = '';-->
<!--      } else {-->
<!--        console.warn('WebSocket 连接尚未建立，消息未发送');-->
<!--      }-->
<!--    },-->
<!--    sendMessageIfConnected() {-->
<!--      if (this.isConnected) {-->
<!--        const initialMessage = {-->
<!--          id: Date.now(),-->
<!--          inquiryId: this.interrogationId, //患者医生聊天表编号-->
<!--          sender: this.doctorId,-->
<!--          content: '初始化连接',-->
<!--          createTime: new Date().toISOString().slice(0, 19).replace('T', ' '),-->
<!--          to: this.consultantId-->
<!--          // interrogationId: this.interrogationId,-->
<!--          // id: Date.now(),-->
<!--          // content: '初始化连接',-->
<!--          // initiatorId: this.id,-->
<!--          // createTime: new Date().toISOString().slice(0, 19).replace('T', ' '),-->
<!--          // to: '101',-->
<!--        };-->
<!--        this.ws.send(JSON.stringify(initialMessage));-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  created() {-->

<!--    this.connectToWebSocket();-->
<!--    this.launchInterrogation();-->
<!--  },-->
<!--  mounted() {},-->
<!--  beforeCreate() {},-->
<!--  beforeMount() {},-->
<!--  beforeUpdate() {},-->
<!--  updated() {},-->
<!--  beforeDestroy() {-->
<!--    if (this.ws && this.ws.readyState === WebSocket.OPEN) {-->
<!--      this.ws.close();-->
<!--    }-->
<!--  },-->
<!--  destroyed() {},-->
<!--  activated() {}-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.message-container {-->
<!--  display: flex;-->
<!--  align-items: flex-start;-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.message-received {-->
<!--  margin-right: auto;-->
<!--  background-color: #ddd;-->
<!--  border-radius: 10px;-->
<!--  padding: 10px;-->
<!--  max-width: 70%;-->
<!--  word-wrap: break-word;-->
<!--}-->

<!--.message-sent {-->
<!--  margin-left: auto;-->
<!--  background-color: #00bfff;-->
<!--  border-radius: 10px;-->
<!--  padding: 10px;-->
<!--  max-width: 70%;-->
<!--  word-wrap: break-word;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: flex-end;-->
<!--}-->

<!--.message-text {-->
<!--  display: block;-->
<!--  color: #333;-->
<!--  font-size: 1em;-->
<!--}-->

<!--.time {-->
<!--  font-size: 0.8em;-->
<!--  color: #999;-->
<!--  margin-top: 5px;-->
<!--}-->

<!--input {-->
<!--  width: 200px;-->
<!--}-->
<!--button {-->
<!--  margin-left: 10px;-->
<!--}-->
<!--</style>-->
<!--<template>-->
<!--  <div>-->
<!--    <h2>图文面诊</h2>-->
<!--    <div v-for="message in messages" :key="message.id" class="message-container">-->
<!--      <div v-if="message.initiatorId !== id" class="message-received">-->
<!--        <span class="message-text">{{ message.content }}</span>-->
<!--        <span class="time">{{ message.createTime }}</span>-->
<!--      </div>-->
<!--      <div v-else class="message-sent">-->
<!--        <span class="message-text">{{ message.content }}</span>-->
<!--        <span class="time">{{ message.createTime }}</span>-->
<!--      </div>-->
<!--    </div>-->
<!--    <input type="text" v-model="newMessage" placeholder="输入消息" />-->
<!--    <button @click="sendMessage">发送</button>-->
<!--  </div>-->
<!--</template>-->

<template>
  <div>
    <div>
      <h2>图文面诊</h2>
      <div v-for="message in messages" :key="message.id" class="message-container">
        <div v-if="message.initiatorId!== id" class="message-received">
          <span class="message-text">{{ message.content }}</span>
<!--          <span class="time">{{ message.createTime }}</span>-->
        </div>
        <div v-else class="message-sent">
          <span class="message-text">{{ message.content }}</span>
          <span class="time">{{ message.createTime }}</span>
        </div>
      </div>
    </div>
    <input type="text" v-model="newMessage" placeholder="输入消息" />
    <button @click="sendMessage">发送</button>
  </div>
</template>
<script>
import { launchInterrogation, historyInterrogation } from '@/api/websocket/websocket';

export default {
  components: {},
  props: {},
  data() {
    return {
      interrogation: {
        id: null,
        initiatorId: 101,
        doctor: 1
      },
      messages: [],
      newMessage: '',
      ws: null,
      id: 1,
      isConnected: false,
      interrogationId: null,
    };
  },
  computed: {},
  watch: {},
  methods: {
    launchInterrogation() {
      //根据患者诊断记录表ID 获取 患者医生聊天记录表ID，根据患者医生聊天记录表ID获取聊天记录
      launchInterrogation(this.interrogation).then(res => {
        this.interrogationId = res.data;
        historyInterrogation(this.interrogationId).then(res => {
          console.log("查询到的历史记录:", res.data.medicalConsultationRecordList);
          if (res.data != null) {
            this.messages = res.data.medicalConsultationRecordList || [];
          }
        });
      });
    },
    connectToWebSocket() {
      const wsUrl = `ws://localhost:10003/imserver/${this.id}`;
      this.ws = new WebSocket(wsUrl);

      this.ws.onopen = () => {
        console.log('WebSocket 连接已打开');
        this.isConnected = true;
        // 在 WebSocket 连接完全建立后再发送初始化消息
        this.sendMessageIfConnected();
      };

      this.ws.onclose = () => {
        console.log('WebSocket 连接已关闭');
        this.isConnected = false;
      };

      this.ws.onerror = (error) => {
        console.error('WebSocket 错误', error);
        this.isConnected = false;
      };

      this.ws.onmessage = (event) => {
        const message = JSON.parse(event.data);
        if (message.content !== undefined) {
          console.log("获取到的回调数据:", message);
          this.messages.push(message);
        } else {
          console.warn('接收到的数据无效或格式错误:', event.data);
        }
      };
    },
    sendMessage() {
      if (this.newMessage.trim() === '') return;
      const now = new Date();
      const formattedTime = now.toISOString().slice(0, 19).replace('T', ' ');
      const message = {
        interrogationId: this.interrogationId,
        id: Date.now(),
        content: this.newMessage,
        createTime: formattedTime,
        initiatorId: 1,
        to: 101
      };
      if (this.isConnected) {
        this.messages.push(message);
        this.ws.send(JSON.stringify(message));
        this.newMessage = '';
      } else {
        console.warn('WebSocket 连接尚未建立，消息未发送');
      }
    },
    sendMessageIfConnected() {
      if (this.isConnected) {
        const initialMessage = {
          interrogationId: this.interrogationId,
          id: Date.now(),
          content: '初始化连接',
          initiatorId: 1,
          createTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
          to: 101
        };
        this.ws.send(JSON.stringify(initialMessage));
      }
    },
  },
  created() {

    this.connectToWebSocket();
    this.launchInterrogation();
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {
    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
      this.ws.close();
    }
  },
  destroyed() {},
  activated() {}
}
</script>

<style scoped>


/* 其他样式保持不变 */
input, button {
  display: inline-block;
}

.message-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.message-received {
  margin-right: auto;
  background-color: #ddd;
  border-radius: 10px;
  padding: 10px;
  max-width: 70%;
  word-wrap: break-word;
}

.message-sent {
  margin-left: auto;
  background-color: #00bfff;
  border-radius: 10px;
  padding: 10px;
  max-width: 70%;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.message-text {
  display: block;
  color: #333;
  font-size: 1em;
}

.time {
  font-size: 0.8em;
  color: #999;
  margin-top: 5px;
}

input {
  width: 200px;
}
button {
  margin-left: 10px;
}
</style>
